<template>
    <div v-loading="loading" class="orderDetail">
        <div class="page-header-wrapper">
            <el-page-header @back="$emit('back')" content="Order Details">
                <template #title>
                    <el-button type="text" icon="el-icon-arrow-left">Back to Orders</el-button>
                </template>
            </el-page-header>
        </div>

        <div class="edit-cards-container">
            <!-- User Info Card -->
            <el-card class="edit-card" shadow="hover">
                <div slot="header" class="card-header">
                    <i class="el-icon-user"></i>
                    <span>User Information</span>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="label">Username:</span>
                        <span class="value">{{ editInfo.username }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">Email:</span>
                        <span class="value">{{ editInfo.email }}</span>
                    </div>
                </div>
            </el-card>

            <!-- Order Info Card -->
            <el-card class="edit-card" shadow="hover">
                <div slot="header" class="card-header">
                    <i class="el-icon-shopping-cart-2"></i>
                    <span>Order Information</span>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="label">Order No:</span>
                        <span class="value">{{ editInfo.order_number }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">Amount:</span>
                        <span class="value">${{ editInfo.amount }}</span>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- Proxy List Table -->
        <el-table 
            :data="editInfo.proxy_list" 
            style="width: 100%" 
            header-cell-class-name="tableDetail_header"
            show-summary>
            <el-table-column type="index" align="center" width="80" label="Index" />
            <el-table-column prop="ip" label="IP" align="center" />
            <el-table-column prop="port" label="Port" align="center" />
            <el-table-column prop="username" label="Username" align="center" />
            <el-table-column prop="password" label="Password" align="center" />
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'EditOrderForm',
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        editInfo: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang="scss" scoped>
.orderDetail {
    .page-header-wrapper {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
        padding: 16px 24px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .edit-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .edit-card {
        .card-header {
            display: flex;
            align-items: center;
            gap: 8px;

            i {
                color: #409EFF;
            }
        }

        .card-content {
            .info-item {
                display: flex;
                margin-bottom: 12px;
                
                .label {
                    color: #909399;
                    min-width: 100px;
                }

                .value {
                    color: #303133;
                }
            }
        }
    }

    .tableDetail_header {
        background-color: #f5f7fa !important;
    }
}
</style>
